<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress-bar {  
  width: 100%;  
  background-color: #333; /* 背景色，你可以替换为绿色或其他颜色 */  
  height: 20px;  
  border-radius: 5px;  
  overflow: hidden;  
}  
  
.progress-bar-fill {  
  height: 100%;  
  background-image: linear-gradient(  
    45deg,  
    rgba(255, 0, 0, 0.5),  
    rgba(0, 255, 0, 0.5),  
    rgba(0, 0, 255, 0.5)  
  ); /* 彩虹色模糊效果，你可以调整颜色和透明度 */  
  background-size: 400% 400%;  
  animation: Gradient 3s ease infinite;  
  border-radius: 5px 0 0 5px;  
  text-align: center;  
  line-height: 20px;  
  color: white;  
  /* 添加模糊效果，注意这可能会根据浏览器和性能有所影响 */  
  filter: blur(2px);  
}  
  
/* 动画效果 */  
@keyframes Gradient {  
  0% {  
    background-position: 0% 50%;  
  }  
  50% {  
    background-position: 100% 50%;  
  }  
  100% {  
    background-position: 0% 50%;  
  }  
}
    </style>
</head>
<body>
    <div class="progress-bar">  
        <div class="progress-bar-fill" style="width: 50%;"></div>  
      </div>
</body>
</html>